<template>
	<view class="container">
		<view>
			<BhTitle titleText="快速找铺"></BhTitle>
		</view>
		<view class="search-bar-wrap" :style="'top: '+titleHeight+'px;'">
			<view class="bh-row bh-justify-space-between search-bar-condition">
				<view :class="['search-bar-condition-item', postDto.areaCode ? 'search-bar-condition-item-active' : '']"
					@click="tapArea">
					<view>{{ displayArea }}</view>
					<view class="triangle"></view>
					<view class="orange-line" v-if="postDto.areaCode"></view>
				</view>
				<view
					:class="['search-bar-condition-item', postDto.industryId ? 'search-bar-condition-item-active' : '']"
					@click="tapIndustryId">
					<view>{{ displayIndustryId }}</view>
					<view class="triangle"></view>
					<view class="orange-line" v-if="postDto.industryId"></view>
				</view>
				<view
					:class="['search-bar-condition-item', postDto.acreageMin >= 0 && postDto.acreageMax >= 0 ? 'search-bar-condition-item-active' : '']"
					@click="tapAcreage">
					<view>{{ displayAcreage }}</view>
					<view class="triangle"></view>
					<view class="orange-line" v-if="postDto.acreageMin >= 0 && postDto.acreageMax >= 0"></view>
				</view>
				<view
					:class="['search-bar-condition-item', postDto.rentMin >= 0 && postDto.rentMax >= 0 ? 'search-bar-condition-item-active' : '']"
					@click="tapRent">
					<view>{{ displayRent }}</view>
					<view class="triangle"></view>
					<view class="orange-line" v-if="postDto.rentMin >= 0 && postDto.rentMax >= 0"></view>
				</view>
			</view>
		</view>
		<view class="body-wrap" >
			<view @click="toSellDetail(item.id)" v-if="currentTabIndex == 0"
				v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
				<postItemMyCollectSell :item="item"></postItemMyCollectSell>
			</view>
			<BhLoadMore :status="tabLoadingStatus" @click-load-more="() => { }"></BhLoadMore>
			<!-- <view @click="toBuyDetail(item.id)" v-if="currentTabIndex == 1" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
        <postItemMyCollectBuy :item="item"></postItemMyCollectBuy>
      </view> -->
			<view style="padding-top: 60rpx;"
				v-if="currentTabIndex == 0 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0) && tabLoadingStatus != 'loading'">
				<bh-no-more></bh-no-more>
			</view>
			<!-- <view style="padding-top: 60rpx;" v-if="currentTabIndex == 1 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0)">
        <bh-no-more></bh-no-more>
      </view> -->
		</view>
		<show-drop-area-sheet :show="showArea" :initValue="postDto" :top="titleHeight" :maskClosable="true"
			@close="closePanel" @confirm="confirmArea">
		</show-drop-area-sheet>

		<show-drop-industry-sheet :show="showIndustryId" :initValue="postDto" :top="titleHeight"
			:maskClosable="true" @close="closePanel" @confirm="confirmIndustryId">
		</show-drop-industry-sheet>

		<show-drop-acreage-sheet :show="showAcreage" :initValue="postDto" :top="titleHeight"
			:maskClosable="true" @close="closePanel" @confirm="confirmAcreage"></show-drop-acreage-sheet>
		<show-drop-rent-sheet :show="showRent" :initValue="postDto" :top="titleHeight" :maskClosable="true"
			@close="closePanel" @confirm="confirmRent"></show-drop-rent-sheet>

	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api'
	// import MoneyAreaPopup from '../../components/custom_views/money-area-popup.vue';
	import {
		CustomDict
	} from '../../components/custom_views/custom_dict';
	import bhNoMore from '../../components/custom_views/bh-no-more.vue';
	import showAreaStreetTopSheet from '../../components/custom_views/show-area-street-top-sheet.vue';
	import {
		showAreaStreetSheetMixin
	} from '../../components/custom_views/show-area-street-sheet-mixin'
	import {
		getDefaultPostDto
	} from '@/components/post_item/post_add_sell_dto';
	import {
		Dict
	} from '../../components/custom_views/dict';
	import showDropAreaSheet from '../../components/custom_views/show-drop-area-sheet.vue'
	import showDropAcreageSheet from '../../components/custom_views/show-drop-acreage-sheet.vue'
	import showDropIndustrySheet from '../../components/custom_views/show-drop-industry-sheet.vue'
	import showDropRentSheet from '../../components/custom_views/show-drop-rent-sheet.vue'
	import {
		bhTabMixin
	} from '../../components/custom_views/mixin';
	import postItemMyCollectSell from '@/PostPage/post_item/post_item_my_collect_sell.vue'
	import postItemMyCollectBuy from '@/PostPage/post_item/post_item_my_collect_buy.vue'
	import BhLoadMore from '../../components/custom_views/bh-load-more.vue';
	export default {
		components: {
			bhNoMore,
			showAreaStreetTopSheet,
			showDropAreaSheet,
			showDropIndustrySheet,
			showDropAcreageSheet,
			showDropRentSheet,
			postItemMyCollectSell,
			BhLoadMore
		},
		mixins: [showAreaStreetSheetMixin, bhTabMixin],
		data() {
			return {
				...bhTabMixin.initData(0),
				tabList: [{
					id: 1,
					name: '转铺',
					list: [],
					param: {
						pageNum: 1,
						pageSize: 10,
						postType: Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
					}
				}],
				postDto: {
					areaCode: '',
					area: '',
					street: '',
					acreageMin: undefined,
					acreageMax: undefined,
					industryId: undefined,
					rentMin: undefined,
					rentMax: undefined
				},
				// 是否显示搜索条件面板
				showArea: false,
				showIndustryId: false,
				showAcreage: false,
				showRent: false,
				// 条件区域面积
				conditionHeight: 150,
				titleHeight:0,
			}
		},
		computed: {
			// 区域
			displayArea() {
				if (this.postDto.street) {
					if (this.postDto.street.length > 3) {
						return this.postDto.street.substring(0, 3)
					}
					return this.postDto.street
				} else if (this.postDto.areaCode) {
					if (this.postDto.area.length > 3) {
						return this.postDto.area.substring(0, 3)
					}
					return this.postDto.area
				} else {
					return '区域'
				}
			},
			// 行业
			displayIndustryId() {
				if (this.postDto.industryId && this.postDto.industryId != 0) {
					let industryName = CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
					if (industryName.length > 3) {
						return industryName.substring(0, 3)
					}
					return industryName
				} else {
					return '类型'
				}
			},
			// 面积
			displayAcreage() {
				if (this.postDto.acreageMin >= 0 && this.postDto.acreageMax >= 0) {
					let acreageDesc = CustomDict.getAcreageDesc(this.postDto.acreageMin, this.postDto.acreageMax)
					if (acreageDesc.length > 3) {
						return acreageDesc.substring(0, 3)
					}
					return acreageDesc
				} else {
					return '面积'
				}
			},
			// 租金
			displayRent() {
				if (this.postDto.rentMin >= 0 && this.postDto.rentMax >= 0) {
					let rentDesc = CustomDict.getRentDesc(this.postDto.rentMin, this.postDto.rentMax)
					if (rentDesc.length > 3) {
						return rentDesc.substring(0, 3)
					}
					return rentDesc
				} else {
					return '租金'
				}
			},
		},
		methods: {
			toSellDetail(postId) {
				uni.navigateTo({
					url: '/PostPage/post_detail_sell/post_detail_sell?postId=' + postId
				})
			},
			requestData(param) {
				let param1 = Object.assign(param, this.postDto)
				return Api.PostSellApi.apiList(param1, false)
			},

			confirmArea(areaObj) {
				console.log('选择了地区信息', areaObj)
				this.postDto.area = areaObj.area
				this.postDto.areaCode = areaObj.areaCode
				this.postDto.street = areaObj.street
				this.closePanel()
				this.getTabData(0, true)
			},
			confirmIndustryId(areaObj) {
				console.log('选择了行业信息', areaObj)
				this.postDto.industryId = areaObj.industryId
				this.closePanel()
				this.getTabData(0, true)
			},
			confirmAcreage(areaObj) {
				if (areaObj) {
					this.postDto.acreageMin = areaObj.acreageMin
					this.postDto.acreageMax = areaObj.acreageMax
				} else {
					this.postDto.acreageMin = undefined
					this.postDto.acreageMax = undefined
				}

				this.closePanel()
				this.getTabData(0, true)
			},
			confirmRent(areaObj) {
				if (areaObj) {
					this.postDto.rentMin = areaObj.rentMin
					this.postDto.rentMax = areaObj.rentMax
				} else {
					this.postDto.rentMin = undefined
					this.postDto.rentMax = undefined
				}
				this.closePanel()
				this.getTabData(0, true)
			},
			tapArea() {
				console.log("选择地区条件")
				if (this.panelIsOpen()) {
					this.closePanel()
				} else {
					this.showArea = true
				}
			},
			tapIndustryId() {
				if (this.panelIsOpen()) {
					this.closePanel()
				} else {
					this.showIndustryId = true
				}
			},
			tapAcreage() {
				if (this.panelIsOpen()) {
					this.closePanel()
				} else {
					this.showAcreage = true
				}
			},
			tapRent() {
				if (this.panelIsOpen()) {
					this.closePanel()
				} else {
					this.showRent = true
				}
			},
			panelIsOpen() {
				return this.showArea || this.showIndustryId ||
					this.showAcreage || this.showRent
			},
			closePanel() {
				this.showArea = false
				this.showIndustryId = false
				this.showAcreage = false
				this.showRent = false
			},
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad() {
			this.getTabData(0, 1)
			let capsule = wx.getMenuButtonBoundingClientRect()
			this.titleHeight = capsule.height + 10 + capsule.top
		},
		onReachBottom() {
			console.log('触底了')
			this.scrolltolower()
		},
		onPullDownRefresh() {
			this.getTabData(0, true, (res) => {
				uni.stopPullDownRefresh()
			})
		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);



	.container {
		min-height: 100vh;
		overflow-y: scroll;
		position: relative;
		background-color: #F5F9FA;
	}
	.body-wrap{
		margin-top: 110rpx;
	}
	.orange-line{
		width: 48rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: #F8D247;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	.search-bar-wrap {
		position: fixed;
		left: 0;
		right: 0;
		background-color: white;
		z-index: 10000;
		height: 88rpx;
	}

	.search-bar-condition {
		padding: 0 30rpx;
		height: 88rpx;
	}

	.search-bar-condition-item {
		padding: 0 16rpx;
		color: #666;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.search-bar-condition-item-active {
		font-weight: 600;
		color: #000;
    // color: #F8D247;

	}

	.triangle {
		width: 0px;
		height: 0px;
		border: 10rpx solid transparent;
		border-top-color: #333333;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
</style>